<template>
	<div>
		
		<el-row :gutter="10">
		  <el-col :span="5"><el-input  v-model="search.workerName" placeholder="请输入要查询的姓名"></el-input></el-col>
		  <el-col :span="6">
		    <el-button type="primary" icon="el-icon-search" @click="searchData()">搜索</el-button>
		    <el-button type="primary" icon="el-icon-circle-plus-outline"  plain @click="add()" >添加</el-button>
		  </el-col>
		</el-row>
		<el-table :data="result.tableData" style="width: 100%">
			<el-table-column label="序号" prop="workerId" width="48px"></el-table-column>

			<el-table-column label="姓名" prop="workerName" width="65px"></el-table-column>

			<el-table-column label="性别" prop="workerGender" width="48px"></el-table-column>

			<el-table-column label="年龄" prop="workerAge" width="48px"></el-table-column>

			<el-table-column label="员工号" prop="staffId" width="138px"></el-table-column>

			<el-table-column label="员工类别" prop="workerCategory" width="80px"></el-table-column>

			<el-table-column label="入职时间" prop="entryTime" width="100px"></el-table-column>

			<el-table-column label="操作人	" prop="operator" width="100px"></el-table-column>

			<el-table-column label="操作时间	" prop="operatorTime" width="100px"></el-table-column>

			<el-table-column label="职务	" prop="post" width="60px"></el-table-column>

			<el-table-column label="职称	" prop="title" width="60px"></el-table-column>

			<el-table-column label="人员状态	" prop="workerState" width="100px"></el-table-column>

			<el-table-column label="简介	" prop="introduction" width="60px"></el-table-column>

			<el-table-column label="备注	" prop="remarks" width="80px"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini"  @click="handleEdit(scope.row.workerId)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.row.workerId)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<el-pagination style="margin-top:20px;" background layout="prev, pager, next"
				 :total="result.total"
				 :current-page.sync="query.current" :page-size="query.size" @current-change="getData()">
		</el-pagination>
		
		<el-dialog :title="title" :visible.sync="show">
			
			<StaffAdd :show.sync="show" @getData="getData" :editid="editid" :key="showNum"></StaffAdd>
			
		</el-dialog>
	</div>
</template>
<script>
import axios from '@/utils/axiosutils.js';
import StaffAdd from './add.vue';
export default {
	data() {
		return {
			search: {
			  workerName: ''
			},
			query: {
			  workerName: '',
			  current: 1,
			  size: 10
			},
			result:{
			  tableData: [],
			  pages: 0
			},
			showNum: 0,
			show: false,
			editid: null,
			title: ''
		};
	},
	components:{
	  StaffAdd
	},
	created() {
		this.getData();
	},
	methods: {
		getData() {
			axios.get(
				'/worker/list',
				resp => {
					console.log(resp);
					let page = resp.obj;
					this.result.tableData = page.records
					this.result.total = page.total;
				},
				this.query
			);
		},
		searchData() {
		  this.query.workerName = this.search.workerName
		  this.query.current = 1
		  this.getData()
		},
		add(){
		  this.showNum++;
		  this.title = '添加用户'
		  this.editid = null
		  this.show = true
		},
		handleEdit(workerId) {
		this.showNum++;
		  this.title = '修改用户'
		  this.editid = workerId
		  this.show = true
		},
		handleDelete(workerId) {
		      axios.del('/worker/del',response => {
		        this.getData()	
		      },{ workerId: workerId })
		    }
	}
};
</script>

<style>
	.el-row{
		height: 50px;
	}
.el-main {
	background-color: #e9eef3;
	color: #333;
	line-height: 20px !important;
}
</style>
